<template>
  <div class="popup_content">
    <van-popup
      v-model:show="showPopup"
      closeable
      round
      position="bottom"
      :style="{ height: '70%' }"
    >
      <van-search
        v-model="searchValue"
        clearable
        show-action
        placeholder="请输入搜索关键词"
        shape="round"
        @search="onSearch"
        @update:model-value="onvalueChange"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
      <!-- 顶部tag↓ -->
      <van-tabs
        swipe-threshold="3"
        swipeable
        v-model:active="topActive"
        v-show="!showCardList"
      >
        <van-tab
          v-for="(item, index) in SHOP_DATA"
          :key="index"
          :title="item.text"
          :class="'top-tab' + index"
        >
          <!-- 顶部tag↑ -->
          <!-- 侧边栏↓ -->
          <van-tree-select
            v-model:main-active-index="activeIndex"
            height="88%"
            :items="SHOP_DATA[topActive].children"
            @click-nav="handleClickNav"
          >
            <template #content>
              <div class="item_content">
                <div
                  v-for="(body, bodyIndex) in SHOP_DATA[topActive].children"
                  :key="bodyIndex"
                  class="content_body"
                  :data-index="bodyIndex"
                >
                  <div class="content_title" :class="'title' + bodyIndex">
                    {{ body.text }}
                  </div>
                  <van-card
                    v-for="(item2, index2) in body.children"
                    :key="index2"
                    :price="item2.price"
                    :desc="item2.desc"
                    :title="item2.title"
                    thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
                    @click="addItem(item2)"
                  >
                    <template #tags>
                      <van-tag plain type="danger">标签</van-tag>
                      <van-tag plain type="danger">标签</van-tag>
                    </template>
                    <template #footer>
                      <van-button size="mini">添加</van-button>
                    </template>
                  </van-card>
                </div>
              </div>
            </template>
          </van-tree-select>
          <!-- 侧边栏↑ -->
        </van-tab>
      </van-tabs>
      <div v-show="showCardList">
        <van-card
          v-for="(item, index) in searchResult"
          :key="index"
          :num="item.number"
          :price="item.price"
          :desc="item.desc"
          :title="item.title"
          thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
        >
          <template #tags>
            <van-tag plain type="danger">标签</van-tag>
            <van-tag plain type="danger">标签</van-tag>
          </template>
          <template #footer>
            <van-button size="mini">按钮</van-button>
            <van-button size="mini">按钮</van-button>
          </template>
        </van-card>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { inject, ref, watch } from "vue";
import SHOP_DATA from "./shopItemData";

export default {
  setup() {
    const showPopup = inject("showPopup", false);
    const showCardList = ref(false);
    const searchValue = ref("");
    const searchResult = ref([]);
    const activeIndex = ref(0);
    const topActive = ref(0);

    watch(searchValue, (newValue) => {
      return (showCardList.value = newValue.length > 0 ? true : false);
    });

    watch(showPopup, (newValue) => {
      // 监听弹窗,当弹窗出现时添加滚动监听事件
      if (newValue) {
        setTimeout(() => {
          // 使用setTimeout是因为nextTick在此场景下无效
          const titleDomList = document.querySelector(`.item_content`);
          console.log(titleDomList, 11111);
          titleDomList.addEventListener("scroll", () => {
            console.log(
              "距离顶部高度",
              document
                .querySelectorAll(".content_body")[0]
                .getBoundingClientRect().top
            );
          });
        });
      } else {
        // 当弹窗关闭时移除滚动事件
        const titleDomList = document.querySelector(`.item_content`);
        titleDomList.removeEventListener(
          "click",
          function () {
            alert(123);
          },
          false
        );
      }
    });

    return {
      showPopup,
      showCardList,
      searchValue,
      activeIndex,
      topActive,
      searchResult,
      SHOP_DATA,
    };
  },
  methods: {
    addItem(item) {
      this.showPopup = false;
      this.$emit("addItem", item);
    },
    onSearch() {
      this.searchResult = [];
      SHOP_DATA.forEach((ele1) => {
        ele1.children.forEach((ele2) => {
          ele2.children.forEach((ele3) => {
            if (ele3.title === this.searchValue) {
              this.searchResult.push(ele3);
            }
          });
        });
      });
    },
    onvalueChange(value) {
      this.searchResult = [];
      SHOP_DATA.forEach((ele1) => {
        ele1.children.forEach((ele2) => {
          ele2.children.forEach((ele3) => {
            if (ele3.title === value) {
              this.searchResult.push(ele3);
            }
          });
        });
      });
    },
    handleClickNav(navIndex) {
      this.$el
        .querySelector(`.top-tab${this.topActive} .title${navIndex}`)
        .scrollIntoView();
    },
  },
};
</script>

<style scoped>
.popup_content /deep/ .van-popup {
  display: flex;
  flex-direction: column;
}
.popup_content /deep/ .van-search {
  padding-right: 50px;
}
.popup_content /deep/ .van-tabs {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.popup_content /deep/ .van-tabs__content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.popup_content /deep/ .van-swipe {
  flex-grow: 1;
}
.popup_content /deep/ .van-swipe-item {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.popup_content /deep/ .van-tab__panel {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.van-tree-select {
  flex-grow: 1;
}
.popup_content /deep/ .van-sidebar {
  position: absolute;
  flex-direction: column;
  flex-grow: 1;
  width: 30%;
  height: 100%;
  overflow: auto;
}
.popup_content /deep/ .van-tree-select__content {
  position: absolute;
  overflow-y: scroll;
  width: 70%;
  height: 100%;
  right: 0;
}
.item_content {
}
.content_title {
  padding: 10px 0;
  text-align: center;
}
</style>